// UserCollections.js
import React, { useState, useEffect } from 'react';
import { Table, Button, message, Card, Row, Col, Pagination } from 'antd';
import axios from 'axios';

const UserCollections = () => {
  const [collections, setCollections] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 8;
  const [loading, setLoading] = useState(false);

  // 列定义
  const columns = [
    {
      title: '歌单名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '收藏时间',
      dataIndex: 'created_at',
      key: 'created_at',
      render: time => new Date(time).toLocaleString()
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button
          type="primary"
          danger
          onClick={() => handleUncollect(record.name)}
        >
          取消收藏
        </Button>
      )
    }
  ];

  // 加载收藏数据
  const loadCollections = async () => {
    setLoading(true);
    try {
      const user = window.localStorage.getItem('loggedUser');
      const res = await axios.get('http://localhost:5000/user-collections', {
        params: { username: user } // 根据实际用户系统调整
      });
      setCollections(res.data);
    } catch (error) {
      message.error('加载收藏列表失败');
    } finally {
      setLoading(false);
    }
  };

  // 初始化加载
  useEffect(() => {
    loadCollections();
  }, []);

  // 处理取消收藏
  const handleUncollect = async (playlistName) => {
    try {
      const user = window.localStorage.getItem('loggedUser');
      await axios.post('http://localhost:5000/collect-playlist', {
        username: user,
        playlist_name: playlistName,
        isCollect: true // 根据后端逻辑，isCollect为true表示取消收藏
      });

      // 更新本地状态
      setCollections(prev =>
        prev.filter(item => item.name !== playlistName)
      );
      message.success('已取消收藏');
    } catch (error) {
      message.error('操作失败');
    }
  };
  //   // 搜索处理
//   const handleSearch = (value) => {
//     setSearchValue(value);
//     if (!value) {
//       setPlaylists(savedData);
//       return;
//     }
  // 当前页数据
  const currentData = collections.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return (
    <div className="content-container">
      <Card title="我的收藏" bordered={false} style={{ marginBottom: 20 }}>
        <div>共收藏 {collections.length} 个歌单</div>
      </Card>

      <Table
        columns={columns}
        dataSource={currentData}
        rowKey="name"
        loading={loading}
        pagination={false}
      />

      <Pagination
        current={currentPage}
        pageSize={pageSize}
        total={collections.length}
        onChange={page => setCurrentPage(page)}
        style={{ marginTop: 20, textAlign: 'center' }}
      />
    </div>
  );
};

export default UserCollections;


// //// components/CollectedPlaylists.js
// import React, { useState, useEffect } from 'react';
// import {Table, Button, Space, message, Card, Descriptions, Modal, Input, Select, Pagination} from 'antd';
// import axios from 'axios';
// import XLSX from 'xlsx';
//
// const { Search } = Input;
//
// const CollectedPlaylists = () => {
//   const [playlists, setPlaylists] = useState([]);
//   const [savedData, setSavedData] = useState([]);
//   const [loading, setLoading] = useState(true);
//   const [currentDetail, setCurrentDetail] = useState(null);
//   const [operationLoading, setOperationLoading] = useState({});
//   const [searchType, setSearchType] = useState('name');
//   const [searchValue, setSearchValue] = useState('');
//   const [currentPage, setCurrentPage] = useState(1);
//   const pageSize = 8;
//
//   // 表格列配置
//   const columns = [
//     {
//       title: '序号',
//       key: 'index',
//       render: (_, __, index) => (currentPage - 1) * pageSize + index + 1,
//     },
//     {
//       title: '歌单名称',
//       dataIndex: 'name',
//       key: 'name',
//       render: (text) => <a onClick={() => setCurrentDetail(playlists.find(p => p.name === text))}>{text}</a>
//     },
//     {
//       title: '类型',
//       dataIndex: 'type',
//       key: 'type',
//     },
//     {
//       title: '收藏时间',
//       dataIndex: 'created_at',
//       key: 'created_at',
//       render: (time) => new Date(time).toLocaleDateString()
//     },
//     {
//       title: '热度值',
//       key: 'hot',
//       render: (_, record) => Math.round(
//         record.play_count * 0.6 +
//         record.favorite_count * 0.3 +
//         record.comment_count * 0.1
//       ).toLocaleString()
//     },
//     {
//       title: '操作',
//       key: 'action',
//       render: (_, record) => (
//         <Space size="middle">
//           <Button
//             type="primary"
//             danger
//             loading={operationLoading[record.name]}
//             onClick={() => handleUncollect(record.name)}
//           >
//             取消
//           </Button>
//         </Space>
//       )
//     }
//   ];
//
//   // 获取收藏数据
//   const fetchCollectedData = async () => {
//     try {
//       const user = window.localStorage.getItem('loggedUser');
//       const [collectionsRes, playlistsRes] = await Promise.all([
//         axios.get('http://localhost:5000/user-collections', {
//           params: { username: user }
//         }),
//         axios.get('http://localhost:5000/playlists')
//       ]);
//
//       const collectedNames = collectionsRes.data.map(p => p.name);
//       const filtered = playlistsRes.data.data.filter(p =>
//         collectedNames.includes(p.name)
//       );
//
//       const formattedData = filtered.map(p => ({
//         ...p,
//         favorite_count: parseInt(p.favorite_count) || 0,
//         created_at: p.created_at || new Date().toISOString()
//       }));
//
//       setPlaylists(formattedData);
//       setSavedData(formattedData);
//     } catch (error) {
//       message.error('数据加载失败');
//     } finally {
//       setLoading(false);
//     }
//   };
//
//   useEffect(() => {
//     fetchCollectedData();
//   }, []);
//
//   // 取消收藏
//   const handleUncollect = async (playlistName) => {
//     setOperationLoading(prev => ({ ...prev, [playlistName]: true }));
//     try {
//       const user = window.localStorage.getItem('loggedUser');
//       const response = await axios.post('http://localhost:5000/collect-playlist', {
//         username: user,
//         playlist_name: playlistName,
//         isCollect: true
//       }, { timeout: 5000 });
//
//       if (response.data.success) {
//         setPlaylists(prev => prev.filter(p => p.name !== playlistName));
//         setSavedData(prev => prev.filter(p => p.name !== playlistName));
//         message.success('已取消收藏');
//       }
//     } catch (error) {
//       handleRequestError(error);
//     } finally {
//       setOperationLoading(prev => ({ ...prev, [playlistName]: false }));
//     }
//   };
//
//   const handleRequestError = (error) => {
//     let errorMsg = '请求失败';
//     if (error.response) {
//       switch (error.response.status) {
//         case 400: errorMsg = '请求参数错误'; break;
//         case 404: errorMsg = '歌单不存在'; break;
//         case 500: errorMsg = '服务器错误'; break;
//       }
//     } else if (error.request) {
//       errorMsg = '网络连接异常';
//     }
//     message.error(errorMsg);
//   };
//
//   // 搜索处理
//   const handleSearch = (value) => {
//     setSearchValue(value);
//     if (!value) {
//       setPlaylists(savedData);
//       return;
//     }
//
//     const filtered = savedData.filter(item => {
//       const targetValue = item[searchType]?.toString().toLowerCase() || '';
//       return targetValue.includes(value.toLowerCase());
//     });
//     setPlaylists(filtered);
//   };
//
//   // 导出Excel
//   const handleExport = () => {
//     const exportData = playlists.map(item => ({
//       '歌单名称': item.name,
//       '类型': item.type,
//       '收藏时间': new Date(item.created_at).toLocaleDateString(),
//       '热度值': Math.round(item.play_count * 0.6 + item.favorite_count * 0.3 + item.comment_count * 0.1),
//       '标签': typeof item.tags === 'string' ? item.tags.split(',').join(' · ') : item.tags
//     }));
//
//     const worksheet = XLSX.utils.json_to_sheet(exportData);
//     const workbook = XLSX.utils.book_new();
//     XLSX.utils.book_append_sheet(workbook, worksheet);
//     XLSX.writeFile(workbook, "歌单收藏列表.xlsx");
//     message.success('导出成功');
//   };
//
//   return (
//     <div className="content-container">
//       <Card
//         title={`我的收藏（共 ${playlists.length} 个）`}
//         bordered={false}
//         style={{ marginBottom: 20 }}
//       >
//         <Space style={{ marginBottom: 16 }}>
//           <Select
//             value={searchType}
//             style={{ width: 120 }}
//             onChange={setSearchType}
//             options={[
//               { value: 'name', label: '歌单名称' },
//               { value: 'type', label: '类型' },
//               { value: 'tags', label: '标签' },
//             ]}
//           />
//           <Search
//             placeholder="请输入关键词"
//             allowClear
//             enterButton
//             style={{ width: 300 }}
//             onSearch={handleSearch}
//             onChange={(e) => setSearchValue(e.target.value)}
//             value={searchValue}
//           />
//           <Button type="primary" ghost onClick={handleExport}>
//             导出歌单
//           </Button>
//         </Space>
//
//         <Table
//           columns={columns}
//           dataSource={playlists.slice((currentPage - 1) * pageSize, currentPage * pageSize)}
//           rowKey="name"
//           loading={loading}
//           pagination={false}
//           locale={{ emptyText: '暂无收藏歌单' }}
//         />
//
//         <Pagination
//           current={currentPage}
//           pageSize={pageSize}
//           total={playlists.length}
//           onChange={setCurrentPage}
//           style={{ marginTop: 20, textAlign: 'center' }}
//           showSizeChanger={false}
//         />
//       </Card>
//
// <Modal
//   title="歌单详情"
//   open={!!currentDetail}
//   onCancel={() => setCurrentDetail(null)}
//   footer={null}
//   width={800}
// >
//   {currentDetail && (
//     <Descriptions bordered column={2}>
//       <Descriptions.Item label="名称" span={2}>{currentDetail.name}</Descriptions.Item>
//       <Descriptions.Item label="创建时间">{currentDetail.created_date}</Descriptions.Item>
//       <Descriptions.Item label="类型">{currentDetail.type}</Descriptions.Item>
//       <Descriptions.Item label="收藏量">{currentDetail.favorite_count}</Descriptions.Item>
//       <Descriptions.Item label="播放量">{currentDetail.play_count}</Descriptions.Item>
//       <Descriptions.Item label="标签" span={2}>
//         {typeof currentDetail.tags === 'string' ?
//           currentDetail.tags.split(',').join(' · ') :
//           currentDetail.tags}
//       </Descriptions.Item>
//     </Descriptions>
//   )}
// </Modal>
//     </div>
//   );
// };
//
// export default CollectedPlaylists;